<script setup>
import { onMounted } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  PieChart,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
]);

const marketTrends = {
  title: {
    text: '市场趋势分析'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330],
    type: 'line',
    smooth: true
  }]
};

const portfolioDistribution = {
  title: {
    text: '投资组合分布'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: '5%',
    top: 'middle',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 20,
    textStyle: {
      fontSize: 14
    }
  },
  series: [{
    name: '投资组合',
    type: 'pie',
    radius: ['40%', '70%'],
    center: ['40%', '50%'],
    avoidLabelOverlap: true,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: true,
      formatter: '{b}: {d}%'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: '16',
        fontWeight: 'bold'
      }
    },
    data: [
      { value: 1048, name: '股票' },
      { value: 735, name: '基金' },
      { value: 580, name: '债券' },
      { value: 484, name: '现金' }
    ]
  }]
};
</script>

<template>
  <div class="dashboard">
    <div class="overview-cards">
      <div class="card">
        <h3>总资产</h3>
        <p class="number">¥1,234,567</p>
        <p class="trend up">+2.5%</p>
      </div>
      <div class="card">
        <h3>今日收益</h3>
        <p class="number">¥12,345</p>
        <p class="trend up">+1.2%</p>
      </div>
      <div class="card">
        <h3>总收益率</h3>
        <p class="number">15.8%</p>
        <p class="trend up">+0.8%</p>
      </div>
      <div class="card">
        <h3>风险指数</h3>
        <p class="number">中等</p>
        <p class="description">适中风险</p>
      </div>
    </div>

    <div class="charts-container">
      <div class="chart-box">
        <v-chart class="chart" :option="marketTrends" />
      </div>
      <div class="chart-box">
        <v-chart class="chart" :option="portfolioDistribution" />
      </div>
    </div>

    <div class="recent-activities">
      <h3>最近活动</h3>
      <div class="activity-list">
        <div class="activity-item">
          <div class="activity-icon buy">买入</div>
          <div class="activity-content">
            <h4>购买股票</h4>
            <p>购买腾讯控股 100股</p>
            <span class="time">2024-01-20 14:30</span>
          </div>
          <div class="activity-amount">-￥50,000</div>
        </div>
        <div class="activity-item">
          <div class="activity-icon sell">卖出</div>
          <div class="activity-content">
            <h4>卖出基金</h4>
            <p>卖出创新基金 200份</p>
            <span class="time">2024-01-19 15:20</span>
          </div>
          <div class="activity-amount profit">+￥25,000</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard {
  width: 100%;
  min-width: 1200px;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.card h3 {
  color: #666;
  margin-bottom: 10px;
}

.number {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}

.trend {
  color: #52c41a;
}

.trend.up::before {
  content: "↑";
  margin-right: 4px;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.chart-box {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  position: relative;
  min-height: 450px;
}

.chart {
  height: 450px;
  width: 100%;
}

.recent-activities {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.activity-list {
  margin-top: 30px;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}

.activity-icon.buy {
  background: #1890ff;
}

.activity-icon.sell {
  background: #52c41a;
}

.activity-content {
  flex: 1;
  margin: 0 40px;
}

.activity-content h4 {
  margin: 0;
  color: #333;
}

.time {
  color: #999;
  font-size: 12px;
}

.activity-amount {
  font-weight: bold;
}

.activity-amount.profit {
  color: #52c41a;
}
</style> 